iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
自我挑戰組

邊工作邊進行前端學習之旅系列 第 6

[Day 6 ] 想發表作品,先學會使用 Github 生成靜態網頁吧!

  • 分享至 

  • xImage
  •  

前言

過去總是羨慕具有設計、美術能力的朋友們,都能累積自己的作品集,並自豪地展現給大眾。我的工作屬於一般行政、企劃,所以儘可能就是將簡報製做好,像是加入簡報製作的線上社團、多看看模板來得到靈感,或是將excel表單做些修正,讓資料整理更有效率,但這些往往不足以成為作品集,呈現出來。

所以啊~當我開始學前端時,知道可以有地方可以將完成的作品存放、分享,並作為網頁形式來展示,立馬一定要先學起來才行啊!

我如何學會 Github 的使用

首先,當然是由饅頭計畫Luka所錄製的課程所學習,接著,我會跟著操作,如在本地端建立資料夾,下指令,並上傳到Github上,最後在於頁面上查看是否成功。
第二,我會習慣性地,再去 Youtube 看看其他老師是如何介紹同樣主題。
Github Pages / 把做好的網頁秀在網路上

  • 2020/02 發布,介紹的方式是直接從 Github 建立新專案,並把專案clone 到本地。
    六角學院 - 如何在 Github Pages 建立靜態網站
  • 2016/07 發布,詳細介紹 Github 的服務,建立新專案教學,此外還有教如何去看commit的修改,更加認識Git 和 Github 是如何搭配使用。

如何於本地創建並推送到 Github

建立index.html檔案

注意:
要上傳靜態網頁之前,別忘了我們在本地端有建立hello_git的資料夾,並初始git inite ,使資料夾內有.git的隱藏檔

  • 完成後別忘了git add,git commit -m ""

在本地端完成後,要進行推送至github!

1.建立新的branch

  • 為昨天提到的 git branch 來建立

2.查看github

  • 圖:在hello_git資料夾,可以查看到分支、檔案

  • 母錢只有master (但我們在本地端已經創立dev,gh-pages兩個分支)

3. git push

  • 本地端完成之後,要記得下git push 將檔案送到遠端
  • 要求要建立新的branch,並照著指令做下一步

4.查看github

5.觀看上傳的靜態網頁

  • 到 Github > hello_git > Setting > pages 查看網址

    網址名稱:[github mname].github.io/[repository name]

我的靜態網頁:Eva813.github.io/hello_git


上一篇
[Day 5] 認識Git,做好版本控制
下一篇
[Day 7] 初學HTML
系列文
邊工作邊進行前端學習之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言